<template>
  <div class="jcsystem">
    <Jcheader />
    <div class="mall">
      <div class="mall-aside">
        <ul>
          <router-link v-for="tab in tabs"
                       :key="tab.id"
                        :to="{name: 'jclist', params: {id:tab.id}}"
                       tag="li">
            {{ tab.title }}
          </router-link>
        </ul>
      </div>
      <div class="mall-section">
        <router-view class="liststyle"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Jcheader from '@/components/jcmodule/jcheader'
export default {
  data () {
    return {
      tabs: [{
        title: '论文查重',
        id: 0
      },
      {
        title: '维普检测',
        id: 1
      },
      {
        title: '知网查重',
        id: 2
      }]
    }
  },
  components: {
    Jcheader
  },
  created () {
  },
  methods: {
    toJclist (id) {
      this.$router.push({ name: 'jclist', params: { id: id } })
    }
  }
}
</script>

<style scoped>
.jcsystem {
  height: 100%;
}
.mall {
  display: flex;
  /* flex-direction: column; */
  height: 100%;
}
.mall-aside {
  width: 1.88rem;
  height: 100%;
  overflow-x: hidden;
  border: 0.01rem solid #eee;
}
.mall-aside ul {
  height: 100%;
  /* background: #fff; */
  border-right: 0.01rem solid #fff;
}
li {
  line-height: 0.78rem;
  height: 0.78rem;
  font-size: 0.26rem;
  padding-left: 0.08rem;
  text-align: center;
  border-left: 0.02rem solid #eee;
}
li.router-link-exact-active,
li.router-link-active {
  background: #fff;
  border-color: #228ef7;
  color: #228ef7;
}
.mall-section {
  flex: 1;
  overflow-x: hidden;
}
.liststyle {
  display: flex;
  flex-wrap: wrap;
  padding: 0.1rem;
}
</style>
